<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<script src="js/mui.min.js"></script>
		<script src="js/zepto.min.js"></script>
		<link href="css/mui.min.css" rel="stylesheet" />
	</head>

	<body>
		<div class="mui-card">
			<ul class="mui-table-view">
				<li class="mui-table-view-cell" id="main1">
					<a class="mui-navigate-right">
	                Item 1
	            </a>
				</li>
				<li class="mui-table-view-cell" id="main2">
					<a class="mui-navigate-right">
	                 Item 2
	            </a>
				</li>
				<li class="mui-table-view-cell" id="main3">
					<a class="mui-navigate-right">
	                 Item 3
	            </a>
				</li>
			</ul>
		</div>
		<div class="mui-card">
			<ul class="mui-table-view">
				<li class="mui-table-view-cell mui-collapse">
					<a class="mui-navigate-right" href="#">表单</a>
					<div class="mui-collapse-content">
						<form class="mui-input-group">
							<div class="mui-input-row">
								<label>Input</label>
								<input type="text" placeholder="普通输入框">
							</div>
							<div class="mui-input-row">
								<label>Input</label>
								<input type="text" class="mui-input-clear" placeholder="带清除按钮的输入框">
							</div>

							<div class="mui-input-row mui-plus-visible">
								<label>Input</label>
								<input type="text" class="mui-input-speech mui-input-clear" placeholder="语音输入">
							</div>
							<div class="mui-button-row">
								<button class="mui-btn mui-btn-primary" type="button" onclick="return false;">确认</button>&nbsp;&nbsp;
								<button class="mui-btn mui-btn-primary" type="button" onclick="return false;">取消</button>
							</div>
						</form>
					</div>
				</li>
				<li class="mui-table-view-cell mui-collapse">
					<a class="mui-navigate-right" href="#">图片轮播</a>
					<div class="mui-collapse-content">
						<div id="slider" class="mui-slider">
							<div class="mui-slider-group mui-slider-loop">
								<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
								<div class="mui-slider-item mui-slider-item-duplicate">
									<a href="#">
										<img src="images/yuantiao.jpg">
									</a>
								</div>
								<!-- 第一张 -->
								<div class="mui-slider-item">
									<a href="#">
										<img src="images/shuijiao.jpg">
									</a>
								</div>
								<!-- 第二张 -->
								<div class="mui-slider-item">
									<a href="#">
										<img src="images/muwu.jpg">
									</a>
								</div>
								<!-- 第三张 -->
								<div class="mui-slider-item">
									<a href="#">
										<img src="images/cbd.jpg">
									</a>
								</div>
								<!-- 第四张 -->
								<div class="mui-slider-item">
									<a href="#">
										<img src="images/yuantiao.jpg">
									</a>
								</div>
								<!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
								<div class="mui-slider-item mui-slider-item-duplicate">
									<a href="#">
										<img src="images/shuijiao.jpg">
									</a>
								</div>
							</div>
							<div class="mui-slider-indicator">
								<div class="mui-indicator mui-active"></div>
								<div class="mui-indicator"></div>
								<div class="mui-indicator"></div>
								<div class="mui-indicator"></div>
							</div>
						</div>
					</div>
				</li>
				<li class="mui-table-view-cell mui-collapse">
					<a class="mui-navigate-right" href="#">文字排版</a>
					<div class="mui-collapse-content">
						<h1>h1. Heading</h1>
						<h2>h2. Heading</h2>
						<h3>h3. Heading</h3>
						<h4>h4. Heading</h4>
						<h5>h5. Heading</h5>
						<h6>h6. Heading</h6>
						<p>
							p. 目前最接近原生App效果的框架。
						</p>
					</div>
				</li>
			</ul>
		</div>
		<div class="mui-content-padded">
			<!-- 弹出菜单 -->
			<a id="btn" href="#" class="mui-btn mui-btn-primary mui-btn-block mui-btn-outlined" style="padding: 5px 20px;" onclick="showActionSheet()">打开actionsheet</a>
			<!-- 上传头像 -->
			<div class="avatar">
				头像:
				<img id="img" style="width:100px;height: 100px;border-radius: 50%;border: 1px solid #b1b1b1;vertical-align: middle;">
			</div>
		</div>
		<script>
			//预加载
			mui.init({
				preloadPages: [{
					id: 'main',
					url: 'main.html'
				}]
			});
			mui.plusReady(function() {
				// 获取摄像头目录对象
				plus.io.resolveLocalFileSystemURL("_doc/", function(entry) {
					entry.getDirectory("camera", {
						create: true
					}, function(dir) {
						gentry = dir;
					}, function(e) {
						//						outSet("Get directory \"camera\" failed: " + e.message);
					});
				}, function(e) {
					//					outSet("Resolve \"_doc/\" failed: " + e.message);
				});
				//读取本地存储，检查是否为首次启动
				var showGuide = plus.storage.getItem("lauchFlag");
				var imgStorage = plus.storage.getItem("imgStorage"); //读取本地存储的头像
				
				alert(showGuide);
				if (showGuide) {
					//有值，说明已经显示过了，无需显示；
					//关闭splash页面；
					plus.navigator.closeSplashscreen();
					plus.navigator.setFullscreen(false);
					/*//初始化模板
					initTemplates();
					//预加载
					preload();*/
				} else {
					//显示启动导航
					mui.openWindow({
						id: 'guide',
						url: 'guide.html',
						show: {
							aniShow: 'none'
						},
						waiting: {
							autoShow: false
						}
					});
					//延迟的原因：优先打开启动导航页面，避免资源争夺
					/*setTimeout(function() {
						//初始化模板
						initTemplates();
						//预加载
						preload();
					}, 200);*/
				}
				
				if(imgStorage){
					getImg(imgStorage);
				}
			});
			var detailPage = null;
			//添加列表项的点击事件
			mui('.mui-table-view').on('tap', 'li', function(e) {
				var id = this.getAttribute('id');
				//console.log(id);
				//获得登录模板页面
				if (!detailPage) {
					detailPage = plus.webview.getWebviewById('main');
				}
				//触发登录模板页面的newsId事件
				mui.fire(detailPage, 'newsId', {
					id: id
				});
				//打开登录模板页面          
				mui.openWindow({
					url: 'main.html',
					id: 'main'
				});
			});

			function showActionSheet() {
				// 弹出系统选择按钮框
				plus.nativeUI.actionSheet({
					title: "Plus is ready!",
					cancel: "取消",
					buttons: [{
						title: "拍照"
					}, {
						title: "选择相册"
					}]
				}, function(e) {
					console.log("User pressed: " + e.index);
					if (e.index == 1) {
						getImage();
					}
					if (e.index == 2) {
						pickUpFromGallery();
					}
				});
			}
			// 拍照添加文件
			function getImage() {
				var cmr = plus.camera.getCamera();
				cmr.captureImage(function(p) {
					plus.io.resolveLocalFileSystemURL(p, function(entry) {
						var localurl = entry.toLocalURL(); //把拍照的目录路径，变成本地url路径，例如file:///........之类的。
						appendFile(localurl);
					});
				}, function(error) {
					alert("Capture image failed: " + error.message);
				});
			}
			// 从相册添加文件 
			function pickUpFromGallery() {
				plus.gallery.pick(function(path) {
					plus.io.resolveLocalFileSystemURL(path, function(entry) {
						var localURL = entry.toLocalURL();
						//document.getElementById('resImg').src = localURL;
						appendFile(localURL); //处理图片的地方
					}, function(e) {
						alert("失败：" + error.message);
					}, {
						filename: "_doc/camera/",
						index: 1
					});
				});
			}
			// 添加文件
			var f1 = null;

			function appendFile(path) {
				var img = new Image();
				img.src = path; // 传过来的图片路径在这里用。
				img.onload = function() {
					var that = this;
					//生成比例 
					var w = that.width,
						h = that.height,
						scale = w / h;
					w = 750 || w; //480  你想压缩到多大，改这里
					h = w / scale;
					//生成canvas
					var canvas = document.createElement('canvas');
					var ctx = canvas.getContext('2d');
					$(canvas).attr({
						width: w,
						height: h
					});
					ctx.drawImage(that, 0, 0, w, h);
					var base64 = canvas.toDataURL('image/jpeg', 1 || 0.8); //1最清晰，越低越模糊。有一点不清楚这里明明设置的是jpeg。弹出 base64 开头的一段 data：image/png;却是png。哎开心就好，开心就好
					//              alert(base64);    
					plus.storage.setItem("imgStorage", base64);
					f1 = base64; // 把base64数据丢过去，上传要用。
					getImg(base64);//这里丢到img 的 src 里面就能看到效果了
					upload();
				}
			}
			// 上传文件
			function upload() {
				var wt = plus.nativeUI.showWaiting();
				var url = 'http://localhost/AjaxUploadDemo/uploadpic.php';
				//发送数据  
				var data = {
					files1: f1 //base64数据        
				};
				$.post(url, data, function(response) {
					plus.nativeUI.closeWaiting();
					if (response != null) {
						alert("上传成功！");
					} else {
						alert("上传失败！");
					}
				}, 'json');
			}

			function getImg(src) { //从本地缓存获取图片并且渲染
				var imgObj = document.getElementById("img");
				
				imgObj.src = src;
			}
		</script>
	</body>

</html>